<template>
    <div v-if="reloadFlag">
      <el-form
        ref="formRef"
        :model="form"
        :size="size"
        :label-width="labelWidth"
        class="_search_form"
        :label-position="labelPosition"
        :rules="rules"
        :hide-required-asterisk="hideRiskStar"
        :disabled="disabled"
      >
        <el-row
          type="flex"
          style="flex-wrap:wrap"
          :gutter="20"
        >
          <el-col
            v-for="item in showConfigs"
            :key="item.key"
            :span="item.span || 8"
            :offset="item.offset"
            :push="item.push"
            :pull="item.pull"
            v-show="!item.hidden"
          >
            <el-form-item
              v-if="!item.show"
              :label="item.label + (hasMark ? '：' : '')"
              :prop="item.key"
              :label-width="item.labelWidth"
              :style="{marginBottom}"
            >
              <!-- 具名插槽 自定义 -->
              <template v-if="$slots[item.key]">
                <slot :name="item.key" />
              </template>
              <!-- 文本框 -->
              <span v-if="!$slots[item.key] && item.type == 'text'">{{ form[item.key] }}</span>
              <!-- 输入框 -->
              <el-input
                v-if="!$slots[item.key] && item.type == 'input'"
                v-model="form[item.key]"
                :type="item.textarea ? 'textarea': ''"
                :rows="item.textarea && ( item.textarea.rows || 5) "
                :style="{width: item.width}"
                clearable
                :placeholder="item.placeholder || item.label"
                :readonly="item.readonly"
                :disabled="item.disabled"
                @change="(val) => { item.change && item.change(val)}"
              />
              <!-- 数字框 -->
              <el-input-number
                v-if="!$slots[item.key] && item.type == 'input-number'"
                v-model="form[item.key]"
                :style="{width: item.width}"
                clearable
                :min="item.min"
                :max="item.max"
                :step="item.step"
                :placeholder="item.placeholder || item.label"
                :readonly="item.readonly"
                :disabled="item.disabled"
                @change="(val) => { item.change && item.change(val)}"
              />
              <!-- 密码框 -->
              <el-input
                v-if="!$slots[item.key] && item.type == 'password'"
                v-model="form[item.key]"
                show-password
                :rows="item.textarea && ( item.textarea.rows || 5) "
                :style="{width: item.width}"
                clearable
                :placeholder="item.placeholder || item.label"
                @change="(val) => { item.change && item.change(val)}"
              />
              <!-- 选择框 -->
              <el-select
                v-if="!$slots[item.key] && item.type == 'select'"
                v-model="form[item.key]"
                :style="{width: item.width}"
                clearable
                :filterable="item.filterable || true"
                :disabled="item.disabled"
                @change="(val) => { item.change && item.change(val)}"
                :multiple="item.multiple"
              >
                <el-option
                  v-for="_t in item.options"
                  :key="_t.value"
                  :label="_t.label"
                  :value="_t.value"
                  :disabled="_t.disabled"
                />
              </el-select>
              <!-- 时间范围选择 -->
              <el-date-picker
                v-if="!$slots[item.key] && item.type == 'daterange'"
                v-model="form[item.key]"
                clearable
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :disabled="item.disabled"
                :style="{width: item.width}"
                @change="(val) => { item.change && item.change(val)}"
              />
              <!-- 日期时间选择器 datetimerange -->
              <el-date-picker
                v-if="!$slots[item.key] && item.type == 'datetimerange'"
                v-model="form[item.key]"
                clearable
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd hh:mm:ss"
                :disabled="item.disabled"
                :style="{width: item.width}"
                @change="(val) => { item.change && item.change(val)}"
              />
              <!-- 日期选择器 date -->
              <el-date-picker
                v-if="!$slots[item.key] && item.type == 'date'"
                v-model="form[item.key]"
                clearable
                :type="item.dateType || 'date'"
                :value-format="item.valueFormat || 'yyyy-MM-dd'"
                :style="{width: item.width}"
                :readonly="item.readonly"
                @change="(val) => { item.change && item.change(val)}"
                :picker-options="item.options"
              />
              <!-- 单选 -->
              <el-radio-group
                v-if="!$slots[item.key] && item.type == 'radio'"
                v-model="form[item.key]"
                @change="(val) => { item.change && item.change(val)}"
              >
                <el-radio
                  v-for="t in item.radios"
                  :key="t.value"
                  :label="t.value"
                >
                  {{ t.label }}
                </el-radio>
              </el-radio-group>
              <!-- 开关选择 switch -->
              <el-switch v-if="!$slots[item.key] && item.type == 'switch'" v-model="form[item.key]" />
              <!-- cascader 集联选择器 -->
              <el-cascader
                v-if="!$slots[item.key] && item.type == 'cascader'"
                v-model="form[item.key]"
                :options="item.options"
                :props="item.props"
                :showAllLevels="item.showAllLevels"
                :collapse-tags="item.collapseTags || true"
                @change="val => {item.change && item.change(val)}"
                @expand-change="val => {item.expandChange && item.expandChange(val)}"
              />
            </el-form-item>
          </el-col>
          <el-col
            v-if="!$scopedSlots.default && !hiddenBtn"
            :span="btnConfig && btnConfig.span || 24"
            :offset="btnConfig && btnConfig.offset || 0"
          >
            <div class="tac">
              <el-button
                class="form-btn"
                :size="size"
                @click="reset"
              >
                重置
              </el-button>
              <el-button
                type="primary"
                class="form-btn"
                :size="size"
                @click="search"
              >
                查询
              </el-button>
              <span class="color-gray" @click="toggleMoreOption" v-show="(configs.filter(a => !a.hidden).length > 6)">{{ moreOptions ? '隐藏更多' : '更多筛选' }}条件<i class="el-icon-arrow-down" :class="moreOptions && 'up'"></i></span>
              <!-- <span class="color-gray" v-show="!moreOptions" @click="toggleMoreOption">隐藏更多条件<i class="el-icon-arrow-up"></i></span> -->
            </div>
          </el-col>
          <el-col
            :span="btnConfig && btnConfig.span || 24"
            :offset="btnConfig && btnConfig.offset || 0"
          >
            <slot :form="form" />
          </el-col>
        </el-row>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
      name: 'SearchQuery',
      props: {
          hideRiskStar: {
              type: Boolean,
              default: false
          },
          configs: {
              type: Array || Object,
              default: () => [],
          },
          hasMark: {
              type: Boolean,
              default: true,
          },
          size: {
              type: String,
              default: 'small'
          },
          hiddenBtn: {
              type: Boolean,
              default: false
          },
          hiddenTitle: {
              type: Boolean,
              default: false
          },
          btnConfig: {
              type: Object,
              default: () => null
          },
          labelWidth: {
              type: String,
              default: ''
          },
          labelPosition: {
              type: String,
              default: 'right'
          },
          marginBottom: {
              type: String,
              default: ''
          },
          rules: {
              type: Object,
              default: () => null
          },
      form: {
        type: Object,
        default: () => {}
      },
      disabled: {
        type: Boolean,
        default: false
      }
      },
      computed: {
        showConfigs() {
            const _showConfigs = this.configs.filter(a => !a.hidden);
            if(this.moreOptions || this.hiddenBtn) {
                return _showConfigs;
            }
            return _showConfigs.filter((a, i) => i < 6);
        }
      },
      data() {
          return {
              a: '',
              reloadFlag: true,
              moreOptions: false
          };
      },
      mounted() {
          this.setQueryValue(this.configs);
          this.resetFields();
      },
      methods: {
          setQueryValue (valList) {
              valList.forEach(a => {
                  this.$set(this.form, a.key, a.value || '');
                  if (a.type == 'daterange') {
                      this.$set(this.form, a.key, null);
                  }
                  if (a.type == 'cascader' || (a.type == 'select' && a.multiple)) {
                    this.$set(this.form, a.key, []);
                  }
              });
          },
          search() {
              this.$emit('onSearch', this.form);
          },
          reset() {
              this.configs.forEach(a => {
                  this.form[a.key] = '';
                  if (a.type == 'daterange') {
                      this.form[a.key] = null;
                  }
                  if (a.type == 'cascader' || (a.type == 'select' && a.multiple)) {
                    this.$set(this.form, a.key, []);
                  }
              });
              this.$emit('onReset', this.form);
              this.resetFields();
          },
          validate(cb) {
              this.$refs.formRef.validate(val => {
                  cb(val);
              });
          },
          validateField(str, cb) {
              this.$refs.formRef.validateField(str, val => {
                  cb(val);
              });
          },
          resetFields() {
              this.rules && Ref.resetFields();
          },
          reload() {
              console.log('reload');
              this.reloadFlag = false;
              this.$nextTick(() => {
                  this.reloadFlag = true;
                  this.setQueryValue(this.configs);
              });
          },
          toggleMoreOption() {
            this.moreOptions = !this.moreOptions;
          }
      },
  };
  </script>
  <style scoped>
  .el-input,
  .el-select,
  .el-date-editor {
      width: 100%;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 100%!important;
  }
  .tac {
      text-align: center;
  }
  .color-gray {
    color: #ccc;
    margin-left: 10px;
    cursor: pointer;
    font-weight: normal;
    font-size: 12px;
  }
  .color-gray .el-icon-arrow-down {
    padding-left: 3px;
    transition: .5s;
  }
  .color-gray .el-icon-arrow-down.up {
    transform: rotate(-180deg);
    transition: .5s ease-in-out;
  }
  </style>
  <style>
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 16px;
  }
  .el-form-item__content {
      line-height: 36px;
  }
  .el-input__icon {
      line-height: 36px;
  }
  </style>
  